<template>
  <div class="box">
    <div class="header3">
      <van-nav-bar
        title="我的收货地址"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      />
    </div>
    <div class="main" v-if="flag">
      <van-address-edit
        :area-list="areaList"
        show-postal
        show-delete
        show-set-default
        show-search-result
        :search-result="searchResult"
        :area-columns-placeholder="['请选择', '请选择', '请选择']"
        @save="onSave"
        @delete="onDelete"
        @change-detail="onChangeDetail"
      />
    </div>
    <div class="main" v-else>
      <van-address-list
        v-model="chosenAddressId"
        :list="list"
       
        default-tag-text="默认"
        @add="onAdd"
        @edit="onEdit"
      />
    </div>
   
  </div>
</template>

<script>
import Vue from "vue";
import { AddressEdit, Toast, Area, AddressList } from "vant";
import { areaList } from "@vant/area-data";
Vue.use(AddressEdit);
Vue.use(Toast);
Vue.use(Area);
Vue.use(areaList);
Vue.use(AddressList);

import { getLists,addLocat,deleLocation } from "../api/location";
export default {
  name: "LocationView",
  data() {
    return {
      flag:false,
      areaList,
      searchResult: [],
      center: [],
      chosenAddressId: '1',
      list: [
      
      ],
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    // 点击保存
    onSave(conter) {
      console.log(conter);
      addLocat({userid:localStorage.getItem('userid'),name:conter['name'],tel:conter['tel'],province:conter['province'],city:conter['city'],county:conter['county'],addressDetail:conter['addressDetail'],isDefault:conter['isDefault']}).then(res=>{
        console.log(res);
        this.flag = false;
        this.$router.go(0)
      })
    },
    // 点击删除
    onDelete() {
      Toast("delete");
    },
    onChangeDetail(val) {
      if (val) {
        this.searchResult = [
          {
            address: "",
          },
        ];
      } 
    },
    // 点击添加地址
     onAdd() {
        this.flag = true;
    },
    // 点击编辑(删除)
    onEdit(item, index) {
      console.log(item);
      console.log(index);
      deleLocation({addressid:item.addressid}).then(res=>{
        console.log(res);
        this.$router.go(0)
      })
    },
  },
  created() {
    getLists({ userid: localStorage.getItem("userid") }).then((res) => {
      console.log(res.data.data);
        this.list = res.data.data
    });
  },
};
</script>

<style scoped>
</style>